<template>
  <main-layout>
    <div class="bodys">
      <div class="headers">
        <!-- <input type="text" placeholder="搜索书名、作者、分类、ISBN" /> -->
        <!-- <div><img src="../../images/cart.png" alt="" />购物车</div> -->
        <h2 style="color: #69696d">购物车</h2>
      </div>
      <div class="container">
        <label>
          <input
            type="checkbox"
            class="all"
            v-model="all"
            @change="allCheck()"
          />全选</label
        >
        <div class="booksList" v-for="item in list" :key="item.title">
          <img @click="moreEvt(item)" :src="item.src" alt="" />
          <div class="box-right">
            <div class="title">{{ item.title }}</div>

            <div class="price">￥{{ item.price }}</div>

            <div class="num">
              <button class="bth1" @click="jian(item)">-</button>
              <div class="num1">{{ item.num }}</div>
              <button class="bth1" @click="jia(item)">+</button>
              <button class="delete" @click="deleteEvt(item)">删除</button>
              <van-checkbox
                class="one"
                @change="oneCheck"
                v-model="item.oneValue"
              ></van-checkbox>
              <!-- <label
                ><input
                  class="one"
                  type="checkbox"
                  v-model="item.oneValue"
                  @change="oneCheck()"
              /></label> -->
            </div>
          </div>
        </div>
      </div>


      <div class="bottom">
        <div class="buy">
          <div class="buytotal">总计:￥{{ total }}</div>
          <button @click="check" class="buybtn">结&emsp;&emsp;&emsp;算</button>
        </div>
      </div>

    </div>
  </main-layout>
</template>
<script>
import { Dialog } from 'vant'

export default {
  data() {
    return {
      list: [],
      all: false,
      total: 0,
    };
  },
  created() {
    let cartM = JSON.parse(sessionStorage.getItem("cartlist"));
    this.list = cartM;
  },
  // watch:{
  //      list:{
  //          deep:true,
  //          immediate:true,
  //      handler(){

  //      }
  //      }

  // },
  methods: {
    check(){
  Dialog.alert({
    title:'请付款',
    message:'这是付款码'
  }).then(()=>{
    
  })
    },
    moreEvt(item) {
      var obj2 = {
        author: item.author,
        src: item.src,
        title: item.title,
        price: item.price,
        press: item.press,
        name: item.name,
      };
      sessionStorage.setItem("more", JSON.stringify(obj2));
      this.$router.push("/more");
    },
    allCheck: function () {
      var _this = this;
      _this.list.forEach(function (item) {
        item.oneValue = _this.all;
      });
         
    },
    oneCheck: function () {
      var total = 0;
      var _this = this;
      var selectData = _this.list.filter(function (item) {
        return item.oneValue == true;
      });
      selectData.length == _this.list.length
        ? (_this.all = true)
        : (_this.all = false);
      selectData.forEach(function (item) {
        total = Number(total) + Number(item.price * item.num);
      });
   _this.total = Number(total.toFixed(2));

      // console.log(selectData);
    },
    deleteEvt(item) {
      Dialog.confirm({
        title: "是否删除?",
      })
        .then(() => {
          let cartM = JSON.parse(sessionStorage.getItem("cartlist"));
          let index = "";
          for (let i = 0; i < cartM.length; i++) {
            if (cartM[i].title == item.title) {
              index = i;
            }
          }
          cartM.splice(index, 1);

          sessionStorage.setItem("cartlist", JSON.stringify(cartM));
          this.list = cartM;
        })
        .catch(() => {});
    },
    jia(item) {
     
      let cartM = JSON.parse(sessionStorage.getItem("cartlist"));
      this.list = cartM;
      let index = "";
      
      for (let i = 0; i < cartM.length; i++) {
        if (cartM[i].title == item.title) {
          index = i;
        }
      }
      this.list[index].num = Number(this.list[index].num) + 1;
      sessionStorage.setItem("cartlist", JSON.stringify(this.list));
    },
    jian(item) {
      let cartM = JSON.parse(sessionStorage.getItem("cartlist"));
      this.list = cartM;
      let index = "";
      for (let i = 0; i < cartM.length; i++) {
        if (cartM[i].title == item.title) {
          index = i;
        }
      }
      if (this.list[index].num == 1) {
        this.list[index].num = 1;
      } else {
        this.list[index].num -= 1;
      }
      sessionStorage.setItem("cartlist", JSON.stringify(this.list));
    },
  },
};
</script>

<style lang="less" scoped>
.headers {
  display: flex;
  input {
    width: 330px;
    height: 35px;
    margin-left: 20px;
    margin-top: 20px;
  }
  div {
    display: flex;
    flex-flow: column;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 25px;
    img {
      width: 20px;
      height: 20px;
    }
  }
  h2 {
    margin: 10px auto;
  }
}
.container {
  label {
    font-size: 15px;
    color: #69696d;
  }
  .booksList {
    width: 95%;
    position: relative;
    display: flex;
    margin-bottom: 30px;
    font-size: 15px;
    background-color: #fff;
    height: 130px;
    border-radius: 10px;
    margin-top: 10px;
    img {
      height: 100px;
      border-radius: 10px;
      margin-top: 15px;
      margin-left: 33px;
    }
    .box-right {
      width: 100%;
      background-color: #fff;
      border-radius: 10px;
      .title {
        width: 250px;
        height: 20px;
        overflow: hidden;
        margin-top: 20px;
        line-height: 20px;
        text-indent: 15px;
        font-size: 12px;
        color: #69696d;
      }
      .price {
        font-size: 15px;
        color: red;
        width: 95px;
        height: 20px;
        float: left;

        position: absolute;
        bottom: 33px;


        left: 140px;

      }
      .one {
        position: absolute;
        left: -213px;
        top: -32px;
        z-index: 99;
      }

      .num {
        width: 150px;
        height: 22px;
        float: left;
        display: flex;
        position: absolute;
        bottom: 18px;
        left: 220px;
        .num1 {
          width: 40px;
          text-align: center;
        }
        .delete {
          width: 90px;
          margin-left: 10px;
          font-size: 15px;
          border: none;
          background-color: #fff;
          color: #69696d;
        }
        .bth1 {
          width: 20px;
          height: 20px;
          border-radius: 10px;
          line-height: 10px;
          font-size: 15px;
          border: none;
          text-indent: -2px;
        }
      }
    }
  }
}
.bottom {
  background: #fff;
  position: fixed;
  bottom: 48px;

width: 100%;
    .buy {
margin-left: 20px;
.buytotal{
  
  color: red;
    width: 30%;
    float: left;
    margin-left: 20px;
    line-height: 50px;
    font-size: 15px;
    text-align: center;
}
.buybtn{
  height: 40px;
    margin-top: 5px;
    float: left;
    background-color: red;
    color: yellow;
    border: none;
    font-size: 15px;
    border-radius: 5px;
    margin-left: 80px;
    display: block;
    width: 40%;
}
}


}
.bodys {
  background-color: whitesmoke;
}
</style>

